iT邦幫忙

2021 iThome 鐵人賽

DAY 9
0
Modern Web

JavaScript 基礎修練系列 第 9

[Day09] JavaScript - 流程判斷

  • 分享至 

  • xImage
  •  

if...else

當條件成立的時候執行 if 內的陳述式,不成立時則執行else的陳述式。

語法

if (條件式) {
    //條件成立時執行內容
}
else {
    //否則執行此區塊內容(else也可不寫,只單獨用if)
}

若有多個判斷條件,可用else if 來增加條件:

if (條件式) {
    //條件成立時執行內容
}

else if (條件式2) {
    //條件式2成立時執行內容
}

else if (條件式3) {
    //條件3式成立時執行內容
}

else {
    //以上條件都不成立時,則執行此區塊內容
}

巢狀迴圈

在符合某個判斷式的情況下,裡面再增加另一個if...else語句,如下:

語法

if (條件式) {
    //條件成立時執行內容
}

else if (條件式2) {
    //條件式2成立時執行內容
    
    if (條件式2-1)
        //條件式2-1成立時執行內容
    else {
        //否則執行此區塊內容
    }
}

else if (條件式3) {
    //條件3式成立時執行內容
}

else {
    //以上條件都不成立時,則執行此區塊內容
}

範例
以下範例,有點像我們在玩的終極密碼的觀念,假設要猜一個1~1000的數字,就可以用以下巢狀迴圈來縮小範圍,再去猜該數字是多少。

  • 這邊要注意的是:

如果要使用兩個判斷條件要加上邏輯運算子 "&&" 或 "||":
Ex.
else if  (500 < num && num <= 750)  {
   console.log('num: 500 ~ 750');
}

X 不能寫成:
Ex.
else if   (500 < num <= 750)   {
     console.log('num: 500 ~ 750');
}

let num = 355;  //假如設定的數字為355

if (num <= 250) {
    console.log('num: <= 250'); 
}
else if ( 250 < num && num <= 500) {     /*這裡其實也可以省略 &&左邊的判斷式,改為(num <= 500),
                                           因為第一個判斷式已先過濾掉小於250的數字,
                                           代表到了第二個判斷式一定會大於250*/
    if (num <= 400) {
        console.log('num: 250 ~ 400');
    }
    else {
        console.log('num: 401~500')
    }
}

else if (500 < num && num <= 750) {     /*可省略 &&左邊的判斷式,改為(num <= 750),
                                          原因同上*/
    console.log('num: 500 ~ 750');
}

else {
    console.log('num: 750 ~ 1000');
}

switch...case

透過 if...else,可以判斷很多不同的狀態。但如果判斷式只有一個變數或者是簡單的邏輯資訊,那就可以透過數值切換 (switch) 的方式來處理,讓整體程式看起來更簡潔。

switch 語句會比對"表達式"裡的值是否符合 case 條件,然後執行跟這個條件符合的陳述式。

語法

switch(expression){
case value1 :
  //當 expression 的值符合 value1時,要執行的陳述句
  break;   // 每個 case後方都會補上 break; 來阻止已完成的區塊在後方繼續執行
case value2 :
  //當 expression 的值符合 value2時,要執行的陳述句
  break;
default:
  //當 expression 的值都不符合上述條件時,要執行的陳述句
  break;
}

範例

  • 用一個常見的例子-以月份判斷季節,如果用if..else的方式,以最精簡的方式大概會是這樣:

    var month = 10;
    var count = Math.ceil(month/3)
    
    if (count === 1  ) {
        console.log('春天');
    }
    
    else if (count === 2  ) {
        console.log('夏天');
    }
    
    else if (count === 3  ) {
        console.log('秋天');
    }
    
    else if (count === 4  ) {
        console.log('冬天');
    }
    
    else {
      console.log('月份錯誤');
    }
    
  • 但若用switch的方法,可以這樣寫:
     看起來比較簡潔,同時也比較好維護,效能也比較好。

    var month = 10;
    
    switch ( Math.ceil(month/3) ){
      case 1:
        console.log('春天');
        break;
    
      case 2:
        console.log('夏天');
        break;
    
      case 3:
        console.log('秋天');
        break;
    
      case 4:
        console.log('冬天');
        break;
    
      default:
        console.log('月份錯誤');
        break;
    }
    

總結

if else瀏覽器在渲染或編譯的時候,會全部跑一次,所以在編譯的速度和效能上,尤其條件很多的情況下,會比switch效能差。因為switch只會檢視case有無符合,才會去跑程式碼,而if else會全部跑一次。

  • 若是判斷的值可以計算,或是介於一個區間,可使用 大於、小於 這類運算子,就用 if else。

  • 若是判斷的值可以用比對的方式來看相同不相同(特定明確的值),就像是字串一樣,那就用 switch 。

 
資料來源:
https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Statements/switch
http://dic.vbird.tw/javascript/unit04.php#4.3
https://ithelp.ithome.com.tw/articles/10191453
https://w3c.hexschool.com/blog/a7d3382b


上一篇
[Day08] JavaScript - 迴圈_part 2
下一篇
[Day10] JavaScript - 傳值 & 傳參考
系列文
JavaScript 基礎修練30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言